<template>
  <div class="stay-info-container ">
    <van-tabs
      v-model="active"
      color="#3378ff"
    >
      <van-tab
        title="工单处理"
        v-if="(ifType===3||ifType===5)&&detailList.status===3"
      >
        <HandleWork
          :deviceModelId="detailList.device_model_id"
          :orderType="detailList.order_type"
          :sourceHandle="detailList.source"
          @handleSub='handleRefresh'
        />
      </van-tab>
      <van-tab title="工单流转">
        <WorkOrderFlow
          :workOrderFlowData="detailList"
          :typePage="detailList.status"
        />
        <div
          class="button-roam"
          v-if="(ifType===2||ifType===5)&&detailList.status===2"
        >
          <van-button
            block
            type="info"
            @click="onComeOrder(detailList.id)"
          >接 单</van-button>
        </div>

      </van-tab>
      <van-tab title="工单详情">
        <div class="stay-info-box">
          <div class="stay-info-content scroll-box">
            <div class="info-top-box">
              <div class="info-content-box info-border">
                <div class="info-content-left ">
                  工单编号
                </div>
                <div class="info-content-reight">{{detailList.order_no}}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">
                  工单类型
                </div>
                <div class="info-content-reight">{{detailList.order_type===1?"维修工单":"保养工单"}}</div>
              </div>
              <div class="info-content-box">
                <div class="info-content-left">
                  工单来源
                </div>
                <div class="info-content-reight">{{sourceText}}</div>
              </div>
            </div>

            <div class="info-conter-box">
              <div class="info-content-box info-border">
                <div class="info-content-left ">
                  设备名称
                </div>
                <div class="info-content-reight">{{detailList.device_name}}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">
                  设备编号
                </div>
                <div class="info-content-reight">{{detailList.device_number}}</div>
              </div>
              <!-- <div class="info-content-box info-border">
                <div class="info-content-left">
                  设备型号
                </div>
                <div class="info-content-reight">{{detailList.device_number}}</div>
              </div> -->
              <div class="info-content-box info-border">
                <div class="info-content-left">
                  合同编号
                </div>
                <div class="info-content-reight">{{detailList.project_contract}}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">
                  产线编号
                </div>
                <div class="info-content-reight">{{detailList.product_line_number}}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">
                  产线识别号
                </div>
                <div class="info-content-reight">{{detailList.identification_number}}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">
                  设备地址
                </div>
                <div class="info-content-reight">{{detailList.address}}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">
                  所属公司
                </div>
                <div class="info-content-reight">{{detailList.customer}}</div>
              </div>
            </div>

            <div class="info-bottom-box">
              <div class="info-content-box info-border">
                <div class="info-content-left ">
                  现场联系人
                </div>
                <div class="info-content-reight">{{detailList.contacts}}</div>
              </div>
              <div class="info-content-box info-border">
                <div class="info-content-left">
                  联系电话
                </div>
                <div class="info-content-reight">{{detailList.contacts_tel}} <a
                    :href="'tel:'+detailList.contacts_tel"
                    class="float-tel"
                  ><i class="iconfont icondianhua color-primary"></i></a></div>
              </div>
            </div>
          </div>

          <div
            class="button-margin"
            v-show="(ifType===2||ifType===5)&&detailList.status===2"
          >
            <van-button
              block
              type="info"
              @click="onComeOrder(detailList.id)"
            >接 单</van-button>
          </div>
        </div>

      </van-tab>
    </van-tabs>

  </div>

</template>

<script>
import { Tab, Tabs, Button, Dialog, Field, Stepper, Popup, Search, Toast } from 'vant';
import { getOrderDetails, receiveOrder, getModelAccessories, completeOrder } from '@/api/maintenanceEngineer';
import HandleWork from './HandleWork.vue'; //处理工单
import WorkOrderFlow from '../components/WorkOrderFlow.vue'; //工单流转
export default {
  name: 'StayWorkDetail',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
    [Field.name]: Field,
    [Stepper.name]: Stepper,
    [Popup.name]: Popup, //弹窗
    [Search.name]: Search, //搜索
    [Toast.name]: Toast, //提示
    WorkOrderFlow,
    HandleWork
  },
  data() {
    return {
      active: 0,
      ifType: '',
      detailList: '', //详情数据
      sourceText: '' //1直接填报  2故障记录或保养计划转换  3上报工单
    };
  },
  mounted() {
    this.ifType = parseInt(this.$route.query.typePage); //2:待接单，3:待处理，4：已完成，5：全部
    this.onDatailList();
  },
  methods: {
    //详情接口数据
    onDatailList() {
      getOrderDetails({ id: this.$route.query.id }).then(res => {
        if (res.data.source === 2 && res.data.order_type === 1) {
          this.sourceText = '报警转工单';
        } else if (res.data.source === 2 && res.data.order_type === 2) {
          this.sourceText = '保养转工单';
        } else if (res.data.source === 1) {
          this.sourceText = '手动创建';
        } else if (res.data.source === 3) {
          this.sourceText = '上报工单';
        }
        res.data.processing_list.map(item => {
          item.operate_content = item.operate_content === '' ? [] : JSON.parse(item.operate_content);
          if (item.operate_content.length > 0) {
            item.operate_content.map((contentItem, index) => {
              if (contentItem.content.substring(0, 1) === '[') {
                //判断字符串第一个是不是[
                contentItem.content = JSON.parse(contentItem.content);
              }
            });
          }
        });
        this.detailList = res.data;
      });
    },

    //接单
    onComeOrder(valId) {
      receiveOrder({ id: valId }).then(res => {
        this.ifType = 0;
        Dialog.confirm({
          title: '接单成功',
          confirmButtonText: '处理工单',
          confirmButtonColor: '#3378FF',
          cancelButtonText: '关闭',
          message: '工单（202104130001）已接单成功，请及时进行处理.'
        })
          .then(() => {
            this.ifType = 3;
            this.onDatailList();
          })
          .catch(() => {
            // this.ifType = 3;
            // this.onDatailList();
          });
      });
    },
    //处理工单刷新
    handleRefresh() {
      this.ifType = 5;
      this.onDatailList();
    }
  }
};
</script>

<style lang="scss" scoped>
.stay-info-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  ::v-deep .van-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;

    .van-tabs__wrap {
      flex-shrink: 0;
    }

    .van-tabs__content {
      flex: 1;
      height: 0;

      .van-tab__pane {
        width: 100%;
        height: 100%;
      }
    }
  }
}

::v-deep .van-field__value {
  border-bottom: 1px solid #f2f6fc;
}

//详情
.stay-info-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.stay-info-content {
  flex: 1;
  padding-bottom: 0.213333rem;
}
.info-top-box {
  width: 100%;
  height: 3.653333rem;
  background-color: #fff;
  padding: 0px 0.426667rem;
  margin-top: 0.213333rem;
}
.info-conter-box {
  width: 100%;
  height: 8.56rem;
  background-color: #fff;
  padding: 0px 0.426667rem;
  margin-top: 0.213333rem;
}
.info-bottom-box {
  width: 100%;
  height: 2.426667rem;
  background-color: #fff;
  padding: 0px 0.426667rem;
  margin-top: 0.213333rem;
}

.info-content-box {
  width: 100%;
  height: 1.226667rem;
  display: flex;
  padding-top: 0.453333rem;
}
.info-content-left {
  width: 2.4rem;
  color: #999999;
  font-size: 0.373333rem;
  min-width: 2.4rem;
}
.info-content-reight {
  color: #333333;
  font-size: 0.373333rem;
  margin-left: 0.426667rem;
  width: 7.733333rem;
}
.info-border {
  border-bottom: 1px solid #f2f6fc;
}
.float-tel {
  float: right;
}

//接单按钮
.button-margin {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.493333rem;
  padding: 0 0.426667rem;
  background-color: #fff;
  border-top: 1px solid #f2f6fc;
}
.button-roam {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.493333rem;
  width: 100%;
  padding: 0 0.426667rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  z-index: 99999;
  border-top: 1px solid #f2f6fc;
}

::v-deep .van-button {
  border-radius: 0.106667rem;
}
</style>